<template>
  <div style="position: relative">
    <div class="mask" v-if="handleType=='look'"></div>
    <a-form
      ref="formRef"
      layout="vertical"
      :model="formState"
      :rules="rules"
      :wrapper-col="wrapperCol"
      style="display: flex; flex-wrap: wrap"
    >
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="name"
        label="真实姓名"
        name="realName"
      >
        <a-input
          v-model:value="formState.realName"
          placeholder="请输入真实姓名"
        />
      </a-form-item>

      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="hospitalDepartId"
        label="所属科室"
        name="hospitalDepartId"
      >
        <a-tree-select
          v-model:value="formState.hospitalDepartId"
          style="width: 200px"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="departmentList"
          placeholder="请选择科室"
          tree-default-expand-all
        >
        </a-tree-select>
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="mobile"
        label="角色名称"
        name="mobile"
      >
        <a-select
          allowClear
          style="width: 100%"
          v-model:value="formState.roleId"
          placeholder="请选择所属角色"
        >
          <a-select-option
            v-for="item in roleListValue"
            :key="item.id"
            :value="item.id"
            >{{ item.name }}</a-select-option
          >
        </a-select>
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="mobile"
        label="手机号码"
        name="mobile"
      >
        <a-input
          style="width: 100%"
          v-model:value="formState.mobile"
          placeholder="请输入手机号码"
        />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-right: 15px"
        ref="idNumber"
        label="身份证号"
        name="idNumber"
      >
        <a-input
          style="width: 100%"
          v-model:value="formState.idNumber"
          placeholder="请输入身份证号"
        />
      </a-form-item>
      <a-form-item
        style="width: 50%; padding-left: 15px"
        ref="jobNumber"
        label="工号"
        name="jobNumber"
      >
        <a-input
          style="width: 100%"
          v-model:value="formState.jobNumber"
          placeholder="请输入工号"
        />
      </a-form-item>
      <a-form-item
        style="width: 100%"
        ref="email"
        label="常用邮箱"
        name="email"
      >
        <a-input
          style="width: 100%"
          v-model:value="formState.email"
          placeholder="请输入常用邮箱"
        />
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import {
  defineComponent,
  onMounted,
  reactive,
  ref,
  toRaw,
  toRef,
  toRefs,
  watch,
} from "vue";
import * as department from "@/api/department";
import { message } from "ant-design-vue";
import { getUserInfo } from "@/utils/auth";
import { IdentityCodeValid, treeDataTranslate } from "@/utils";
import { roleList } from "@/api/setting1.js";
import { hospitalDepartList } from "@/api/hospitalDepart.js";
import * as utils from "@/utils/index.js";
const validateUserPhone = (rule, value, callback) => {
  if (value && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
    callback(new Error("电话有误，请重填"));
  } else {
    callback();
  }
};
const validateUserEmail = (rule, value, callback) => {
  if (value && !/^\w+@[a-z0-9]+\.[a-z]{2,4}$/.test(value)) {
    callback(new Error("填写的邮箱格式错误,请重新填写!"));
  } else {
    callback();
  }
};
const validateCardId = (rule, value, callback) => {
  if (value && !IdentityCodeValid(value)) {
    callback(new Error("输入身份证格式错误请重新输入"));
  } else {
    callback();
  }
};
const validateRealName = (rule, value, callback) => {
  if (!value) {
    callback(new Error("请输入真实姓名"));
  } else if (value && !/^[\u4E00-\u9FA5]{1,25}$|^[A-Za-z]{1,50}$/.test(value)) {
    callback(new Error("真实姓名不超过50个英文字符或25个汉字"));
  } else {
    callback();
  }
};
const validateJobNumber = (rule, value, callback) => {
  if (value.length > 20) {
    callback(new Error("工号长度小于20位"));
  } else {
    callback();
  }
};

const rules = {
  realName: [
    {
      required: true,
      validator: validateRealName,
      trigger: "blur",
    },
  ],
  hospitalDepartId: [
    {
      required: true,
      message: "请选择所属科室",
      trigger: "change",
    },
  ],
  roleId: [
    {
      required: true,
      message: "请选择所属角色",
      trigger: "change",
    },
  ],

  jobNumber: [
    {
      validator: validateJobNumber,
      trigger: "blur",
    },
  ],
  idNumber: [
    {
      validator: validateCardId,
      trigger: "blur",
    },
  ],
  email: [
    {
      validator: validateUserEmail,
      trigger: "blur",
    },
  ],
  mobile: [
    {
      required: true,
      validator: validateUserPhone,
      trigger: "blur",
    },
  ],
};

export default defineComponent({
  props: {
    handleType: {
      type: String,
      default: "add",
    },
    handleRow: {
      type: Object,
      default: {},
    },
  },
  setup(props, { emit }) {
    const handleType = toRef(props, "handleType");
    const formRef = ref();
    const formState = reactive({
      email: "", //常用邮箱
      hospitalDepartId: null, //所属科室
      idNumber: "", //身份证号码
      jobNumber: "", //工号
      mobile: "", //手机号码
      realName: "", //真实姓名
      roleId: null, //角色
      id: "",
    });
    const userInfo = ref(getUserInfo() ? JSON.parse(getUserInfo()) : {});
    const roleListValue = ref([]);
    //获取角色列表
    const handleGetRoleList = () => {
      roleList({ isPage: false }).then((res) => {
        if (res && res.success) {
          roleListValue.value = res.data;
        }
      });
    };
    // 获取科室数据
    const departmentList = ref([]);
    const getKSData = async () => {
      let res = await hospitalDepartList({
        isPage: false,
        name: "",
      });
      if (res && res.success) {
        let departmentListO = res.data.map((item) => {
          item.label = item.name;
          item.value = item.id
          return item;
        });
        departmentList.value = utils.treeDataTranslate(departmentListO);
        console.log(123444444);
        console.log(departmentList.value);
      }
    };
    // 保存数据
    const handleSave = () => {
      if (props.handleType == "look") {
        resetForm();
        emit("finish");
        return false;
      }
      formRef.value.validate().then(() => {
        let params = {
          ...toRaw(formState),
        };
        department.sysUserStaffSave(params).then((res) => {
          if (res && res.success) {
            message.success("操作成功");
            resetForm();
            emit("finish");
          } else {
          }
        });
      });
    };
    const resetForm = () => {
      formRef.value.resetFields();
    };
    onMounted(async () => {
      getKSData()
      handleGetRoleList()
      if (props.handleType == "add") {
        formState.id = "";
        return false;
      }
      console.log(2323)
      formState.id = props.handleRow.id;
      formState.email = props.handleRow.email;
      formState.hospitalDepartId = props.handleRow.hospitalDepartId;
      formState.idNumber = props.handleRow.idNumber;
      formState.jobNumber = props.handleRow.jobNumber;
      formState.realName = props.handleRow.realName;
      formState.roleId = props.handleRow.roleId;
      formState.parentName = props.handleRow.parentName;
      formState.mobile = props.handleRow.mobile;
       formState.sysUserId = props.handleRow.sysUserId;
    });

    return {
      formRef,
      // 角色列表
      roleListValue,
      // 科室列表
      departmentList, //
      handleType,
      userInfo,
      wrapperCol: {
        span: 0,
      },
      formState,
      rules,
      handleSave,
      resetForm,
    };
  },
});
</script>
<style lang="scss">
.mask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
}
</style>